<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<div class="dialog_layer" style="width: 480px;">
<div style="text-align: right;"><button type="button" id="close">닫기</button></div>
	<form name="form1" action="" >
		<table class="rowTable" cellspacing="0">
			<tr> 
				<td colspan="2"><b>검색할 시,읍,구,면,동,이름중 하나를 입력해 주십시오.</b></td>
			</tr>
			<tr>
				<th><b>주소 검색</b></th>
				<td>
					<input type="text" size="30" id="keyword" maxlength="30" style="ime-mode:active;">
					<span class="button black"><button type="button" id="search">검색</button></span>
				</td>
			</tr>
		</table>
		<div id="addr_list" style="overflow-y:scroll;height: 150px;"></div>
		<table class="rowTable" id="addr_confirm" style="display: none">
			<tr> 
			  <th>우편번호</th>
			  <th>주소</th>
			</tr>
			<tr>
				<td class="addr1"></td>
				<td class="addr2"></td>
			</tr>
			<tr>
				<th>나머지 주소</th>
				<td><input type="text" class="addr3" size="40" /></td>
			</tr>
			<tr>
				<td colspan="2"><span class="button black"><button type="button" id="confirm">확인</button></span></td>
			</tr>
		</table>
	</form>
</div>

<script type="text/javascript">
function init(popCallbackFnName, selectorId) {
	//확인
	$('#confirm').click(function(e){
		var returnData = {
			addr1 : $('.addr1').text(),
			addr2 : $('.addr2').text(),
			addr3 : $('.addr3').val()
		};
		$(selectorId).close();
		
		if(typeof popCallbackFnName == "function") {
			popCallbackFnName.call(e.target, returnData);
			$(selectorId).clear();
		}
	});
	
	//주소 검색
	$('#search').click(function(){
		if($('#keyword').val() == '') {
			$('#addr_list').html('<br /><br /><br /><b style="color:red;">검색어를 입력하세요.</b>');
			$('#keyword').focus();
			return false;
		}
		$.ajax({
			url: 'code.do',
			type: 'POST',
			dataType:"json",
			data: {
				method : 'searchAddr',
				keyword: $('#keyword').val()
			},
			indicator: true,
			success: function(jsonData, status, xhr){
				var display = '';
					display += '<table class="rowTable">';
					display += '<tr>'; 
					display += '<th>우편번호</th>';
					display += '<th>주소</th>';
					display += '</tr>';
				$.each(jsonData, function(idx, e) {
					display += '<tr>';
					display += '<td style="width:30px;">' + e.zipcd + '</td>';
					display += '<td>' + e.display_addr + '</td>';
					display += '</tr>';
				});
				
				if(jsonData.length == 0) {
					$('#addr_list').html('<br /><br /><br /><b style="color:blue;">데이타가 없습니다.</b>');
				}else {
					$('#addr_list').html(display);
				}
				
				$('#addr_list').show();
				$('#addr_confirm').hide();
			},
			error:function(xhr, status, e){
				alertDialog("데이터를 가져오는 데 실패 하였습니다.");
			}
		});
			
	});
	
	//주소 리스트 선택시 이벤트
	$('#addr_list tr').live('click', function(){
		var zipcd = $(this).find('td:eq(0)').text();//우편 번호
		var addr = $(this).find('td:eq(1)').text();//상세 주소
		
		$('#addr_list').css('display', 'none');
		
		$('#addr_confirm').show();
		$('.addr1').html(zipcd);
		$('.addr2').html(addr);
	});
	
	//닫기
	$('#close').click(function(e){
		$(selectorId).close();
		$(selectorId).clear();
	});
}
</script>
</body>
</html>